<template>
  <div id="app">
    <div>
      <el-radio-group v-model="isCollapse" style="margin-bottom: 20px;">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <el-menu
        default-active="1-4-1"
        class="el-menu-vertical-demo"
        @open="handleOpen"
        @close="handleClose"
        :collapse="isCollapse"
      >
        <el-submenu index="1">
          <template slot="title">
            <i class="el-icon-sold-out"></i>
            <span slot="title">进货</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1">我要进货</el-menu-item>
            <el-menu-item index="1-2">我要退货</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="1-3">进货单据</el-menu-item>
            <el-menu-item index="1-4">进货台账</el-menu-item>
            <el-menu-item index="1-5">进货退货单据</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="2">
          <template slot="title">
            <i class="el-icon-sold-out"></i>
            <span slot="title">销售</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1">零售</el-menu-item>
            <el-menu-item index="2-2">批发</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="2-3">销售单据</el-menu-item>
            <el-menu-item index="2-4">销售台账</el-menu-item>
            <el-menu-item index="2-5">销售退货单据</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="3">
          <template slot="title">
            <i class="el-icon-success"></i>
            <span slot="title">回收</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="3-1">奖励回收</el-menu-item>
            <el-menu-item index="3-2">退押金</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="3-3">押金单据</el-menu-item>
            <el-menu-item index="3-4">押金流水</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="4">
          <template slot="title">
            <i class="el-icon-star-on"></i>
            <span slot="title">仓库</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="4-1">库存表</el-menu-item>
            <el-menu-item index="4-2">我的商品</el-menu-item>
            <el-menu-item index="4-3">仓库管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="5">
          <template slot="title">
            <i class="el-icon-tickets"></i>
            <span slot="title">资料</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="5-1">会员管理</el-menu-item>
            <el-menu-item index="5-2">供应商管理</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="5-3">店员管理</el-menu-item>
            <el-menu-item index="5-4">角色管理</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="6">
          <template slot="title">
            <i class="el-icon-bell"></i>
            <span slot="title">资金</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="6-1">财务报表</el-menu-item>
            <el-menu-item index="6-2">我的账款</el-menu-item>
            <el-menu-item index="6-3">资金流水</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="7">
          <template slot="title">
            <i class="el-icon-mobile-phone"></i>
            <span slot="title">充值</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="7-1">资金充值</el-menu-item>
            <el-menu-item index="7-2">我要退货</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="7-3">年费续费</el-menu-item>
            <el-menu-item index="7-4">积分流水</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="8">
          <template slot="title">
            <i class="el-icon-view"></i>
            <span slot="title">农户</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="8-1">农户需求</el-menu-item>
            <el-menu-item index="8-2">解决方案</el-menu-item>
          </el-menu-item-group>
        </el-submenu>

        <el-submenu index="9">
          <template slot="title">
            <i class="el-icon-service"></i>
            <span slot="title">企业</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="9-1">企业列表</el-menu-item>
            <el-menu-item index="9-2">企业展示</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-submenu index="10">
          <template slot="title">
            <i class="el-icon-setting"></i>
            <span slot="title">设置</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="10-1">驱动设置</el-menu-item>
            <el-menu-item index="10-2">系统重置</el-menu-item>
          </el-menu-item-group>
          <el-menu-item-group>
            <el-menu-item index="10-3">小票设置</el-menu-item>
            <el-menu-item index="10-4">参数配置</el-menu-item>
          </el-menu-item-group>
        </el-submenu>
        <el-menu-item index="11">
          <i class="el-icon-loading"></i>
          <span slot="title">追溯</span>
        </el-menu-item>
      </el-menu>
    </div>
  </div>
</template>

<style>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>

<script>
export default {
  data() {
    return {
      isCollapse: false
    };
  },
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
};
</script>